<template>
	<div>
		<el-select
      v-model='value'
			placeholder="请选择"
			style="width: 100%"
			filterable
			clearable
			@clear="onClear"
			@change="onChange"
		>
		<el-option
      v-for="item in class_group_list"
      :key="item.value"
      :label="item.label"
      :value="item.value"
    >
      <!-- <span style="float: left">{{ item.section_theme }}</span>
      <span
        style="
          float: right;
          color: var(--el-text-color-secondary);
          font-size: 13px;
        "
        >{{ item.course_id }}</span
      > -->
    </el-option>
		</el-select>
	</div>
</template>

<script lang="ts">
import { type } from "os";
import { defineComponent, inject, onMounted, ref, watch,computed } from "vue";

export default defineComponent({
	name: "classgroup",

	props: {
		modelValue: [String, Number, Array],
		props: Object,
		getClassStudentList:{
			type:Function,
			default:null
		}
	},
	expose:["getClassGroupInfo"],
	// props: {
	// 	value: {
	// 		type: String,
	// 	}
	// },

	emits: ["update:modelValue","change","change:modelValue"],

	setup(props, { emit }) {
		// 请求服务
		const service = inject<any>("service");

		// 数据列表
		// const list = ref<any[]>([]);

		// 绑定值回调
		function onChange(val: any) {
			
			emit("update:modelValue", value.value);
			props.getClassStudentList()
			
		}
		console.log(props);
		

		// 绑定值
		const value = ref("");

		const class_group_list = ref<any>([]);

		const getClassGroupInfo = async function(param={}){
			class_group_list.value=[]
			const res =  await service.classgroupService.list({...param})
			console.log(res);
			const ret = ArrSet(res,'id')
			console.log(ret);

				ret.forEach(item=>{
					class_group_list.value.push({
						value:item.id,
						label:item.class_date + item.class_name + item.class_number,
				})
			})
		}
		// 数组去重
		function ArrSet(Arr, id) {
      var obj = {};
      const arrays = Arr.reduce((setArr, item) => {
        obj[item[id]] ? '' : obj[item[id]] = true && setArr.push(item);
        return setArr;
      }, []);
      return arrays;
    }
		// 加载时调用函数
		onMounted(async ()=>{
			// await getClassGroupInfo()
			
		})

		function onClear(){
			// alert('111')
		}

		// 解析值
		watch(
			() => props.modelValue,
			(val: any) => {
				value.value = val;
			},
			{
				immediate: true
			}
		);

		// onMounted(async () => {
		// 	console.log(service);

		// 	list.value = await service.studentService.list();
		// 	console.log(list.value);
		// });

		return {
			value,
			onChange,
			onClear,
			class_group_list,
			getClassGroupInfo
		};
	}
});
</script>
